<template>
  <CompOperate
    :field="field"
    :designer="designer"
    :design-state="designState"
    :parent-list="parentList"
    :parent-widget="parentWidget"
    :sub-form-row-id="subFormRowId"
    :sub-form-row-index="subFormRowIndex"
    :sub-form-col-index="subFormColIndex"
    :index-of-parent-list="indexOfParentList"
    :display-style="field['options'].displayStyle"
  >
    <div class="scene-public-scheduling" :style="getStyle('area')">
      <div class="scheduling-wrap">
        <div class="main-left">
          <div class="main-left-top">
            <div class="logo-wrap">
              <img
                class="logo"
                alt="企业Logo"
                :style="getStyle('picture')"
                :src="pictureResource"
              />
            </div>
            <div
              class="next-title"
              v-text="optionsInfo.slogan"
              :style="getStyle('title')"
            ></div>
          </div>
          <div class="main-left-content" :style="getStyle('radius')">
            <div class="sec-title" :style="getStyle('secTitle')">专家介绍</div>

            <div class="left-scroll-wrp" ref="listItem">
              <!-- <vue-seamless-scroll
                ref="scroll_1"
                class="scroll"
                :hoverStop="false"
                @ScrollEnd="handleScrollEnd"
                :class-option="classOptionTips()"
                :data="doctorSchedulingInfo.weekList"
              > -->
              <ScrollY v-if="scrollShow" key="scroll1" :pageDuration="optionsInfo.leftSrollSpeed">
                <div slot="content">
                  <div
                    v-for="(item, index) in doctorSchedulingInfo.weekList"
                    :key="index"
                  >
                    <div class="common-title" :style="getStyle('commonTitle')">
                      <div class="shu" :style="getStyle('shu')"></div>
                      {{ item.deptName }}
                      <div class="line" :style="getStyle('line')"></div>
                    </div>
                    <div class="doc-wrp" :style="getStyle('docWrp')">
                      <div
                        class="doc-item"
                        :style="getStyle('docItem')"
                        v-for="(ele, $index) in item.doctorList"
                        :key="ele.$index"
                      >
                        <div class="doc-con">
                          <div class="avatar-wrp">
                            <img
                              class="avatar"
                              :style="getStyle('avatar')"
                              :src="getDoctorPicture(ele)"
                              alt="医生头像"
                            />
                          </div>
                          <div class="doc-info">
                            <div class="line-1" :style="getStyle('line1')">
                              <div class="name" :style="getStyle('docName')">
                                {{ ele.doctorName }}
                              </div>
                              <div class="level" :style="getStyle('level')">
                                {{ ele.doctorTitle }}
                              </div>
                            </div>
                            <div
                              class="line-mian"
                              :style="getStyle('lineMian')"
                            >
                              <div class="flex hang1">
                                <div class="icon-wrp" :style="getStyle('icon')">
                                  <img
                                    :style="getStyle('icon')"
                                    src="@/components/assets/images/sh/sh_zz.png"
                                    alt=""
                                  />
                                </div>
                                <div>{{ ele.expertise }}</div>
                              </div>
                              <div class="flex">
                                <div class="icon-wrp" :style="getStyle('icon')">
                                  <img
                                    :style="getStyle('icon')"
                                    src="@/components/assets/images/sh/sh_time.png"
                                    alt=""
                                  />
                                </div>
                                <div>
                                  <div>{{ ele.expertStr }}</div>
                                  <div>{{ ele.specialStr }}</div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div
                          class="ge"
                          :style="getStyle('ge')"
                          v-if="($index + 1) % 3 != 0"
                        ></div>
                      </div>
                    </div>
                  </div>
                </div>
              </ScrollY>
              <!-- </vue-seamless-scroll> -->
            </div>
          </div>
        </div>
        <div class="main-right">
          <div class="adv-wrp" :style="getStyle('adv')">
            <el-carousel
              v-if="optionsInfo.advType === 'image'"
              indicator-position="none"
              height="100%"
              arrow="never"
              :style="getStyle('carousel')"
            >
              <el-carousel-item
                v-for="(item, index) in optionsInfo.advImgList"
                :key="index"
                :style="backgroundStyle(item.url)"
              >
                <!-- <img :src="item.url" alt="" srcset="" /> -->
              </el-carousel-item>
            </el-carousel>
            <template v-else-if="optionsInfo.advType === 'video'">
              <div class="video-wrap" :style="getStyle('carousel')">
                <div class="video-cover-area" ref="videoInfo" v-if="devType">
                  <i class="el-icon-video-play"></i>
                </div>
                <template v-else>
                  <video
                    class="video-info-area"
                    preload="auto"
                    controls="controls"
                    autoplay
                    @ended="handleEnded"
                    :key="widgetKey"
                  >
                    <source :src="getSource()" type="video/mp4" />
                    <source :src="getSource()" type="video/ogg" />
                    很抱歉 , 当前浏览器不支持现有视频格式 ~
                  </video>
                </template>
              </div>
            </template>
          </div>
          <div class="work-wrp" :style="getStyle('workWrp')">
            <div class="work-item" :style="getStyle('workItem')">
              <div class="common-title" :style="getStyle('commonTitle')">
                <div class="shu" :style="getStyle('shu')"></div>
                今日出诊
                <div class="line" :style="getStyle('line')"></div>
              </div>
              <!-- <vue-seamless-scroll
                ref="scroll_2"
                class="scroll"
                :hoverStop="false"
                @ScrollEnd="handleScroll2End"
                :class-option="classOptionTips()"
                :data="doctorSchedulingInfo.workerList"
              > -->
              <ScrollY key="scroll2" v-if="scrollShow" :pageDuration="optionsInfo.rightSrollSpeed">
                <div slot="content">
                  <div
                    v-for="item in doctorSchedulingInfo.workerList"
                    :key="item.deptName"
                  >
                    <div class="dept-wrp" :style="getStyle('deptWrp')">
                      <div class="dept-title" :style="getStyle('deptTitle')">
                        <img
                          :style="getStyle('deptImg')"
                          src="@/components/assets/images/sh/sh_t_left.png"
                          alt=""
                        />{{ item.deptName }}
                        <img
                          src="@/components/assets/images/sh/sh_t_right.png"
                          alt=""
                          :style="getStyle('deptImg')"
                        />
                      </div>
                      <div class="name-wrp" :style="getStyle('nameWrp')">
                        <div
                          class="name-item"
                          v-for="(ele, index) in item.doctorList"
                          :key="index"
                        >
                          <div class="name-con" :style="getStyle('nameCon')">
                            {{ ele }}
                          </div>
                          <div
                            class="ge"
                            v-if="(index + 1) % 5 != 0"
                            :style="getStyle('nameGe')"
                          ></div>
                        </div>
                      </div>
                    </div>
                  </div></div
              ></ScrollY>
            </div>
            <div class="ge" :style="getStyle('workGe')"></div>
            <div class="work-item" :style="getStyle('workItem')">
              <div class="common-title" :style="getStyle('commonTitle')">
                <div class="shu" :style="getStyle('shu')"></div>
                今日停诊
                <div class="line" :style="getStyle('line')"></div>
              </div>
              <!-- <vue-seamless-scroll
                ref="scroll_3"
                class="scroll"
                :hoverStop="false"
                @ScrollEnd="handleScroll3End"
                :class-option="classOptionTips()"
                :data="doctorSchedulingInfo.workerList"
              > -->

              <ScrollY key="scroll3" v-if="scrollShow" :pageDuration="optionsInfo.rightSrollSpeed">
                <div slot="content">
                  <div
                    v-for="item in doctorSchedulingInfo.stopList"
                    :key="item.deptName"
                  >
                    <div class="dept-wrp" :style="getStyle('deptWrp')">
                      <div class="dept-title" :style="getStyle('deptTitle')">
                        <img
                          :style="getStyle('deptImg')"
                          src="@/components/assets/images/sh/sh_t_left.png"
                          alt=""
                        />{{ item.deptName }}
                        <img
                          src="@/components/assets/images/sh/sh_t_right.png"
                          alt=""
                          :style="getStyle('deptImg')"
                        />
                      </div>
                      <div class="name-wrp" :style="getStyle('nameWrp')">
                        <div
                          class="name-item"
                          :style="getStyle('nameCon')"
                          v-for="(ele, index) in item.doctorList"
                          :key="index"
                        >
                          <div class="name-con">
                            {{ ele }}
                          </div>
                          <div
                            class="ge"
                            v-if="(index + 1) % 5 != 0"
                            :style="getStyle('nameGe')"
                          ></div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- </vue-seamless-scroll> -->
                </div></ScrollY
              >
            </div>
          </div>
          <!-- <div class="intro-wrp" :style="getStyle('introWrp')">
            <div
              class="intro-title"
              v-text="optionsInfo.introTitle"
              :style="getStyle('introTitle')"
            ></div>
            <div
              class="intro-content"
              v-text="optionsInfo.introContent"
              :style="getStyle('introCon')"
            ></div>
          </div> -->
        </div>
      </div>
    </div>
  </CompOperate>
</template>

<script>
import { v4 as uuid } from "uuid";
import { getQueryString, pxToVw } from "@/utils/common";
import emitter from "@/utils/designer/emitter";
import SvgIcon from "@c/public/svg-icon/index.vue";
import ScrollX from "@c/public/seamlessScroll/ScrollX.vue";
import ScrollY from "@c/public/seamlessScroll/ScrollY3.vue";
import mixin from "@sc/templateDetails/modules/homeMiddle/fieldMixin";
import CompOperate from "@c/public/form-designer/devType/modules/compOperate.vue";
import vueSeamlessScroll from "vue-seamless-scroll";
import axios from "axios";
import { buildParentApi } from "@/utils/designer/util";
import Template from "@sc/template/index.vue";
export default {
  name: "scene-public-doctor-scheduling-adv-3096-widget",

  componentName: "FieldWidget", //必须固定为FieldWidget，用于接收父级组件的broadcast事件

  mixins: [emitter, mixin],

  components: {
    Template,
    ScrollY,
    SvgIcon,
    ScrollX,
    CompOperate,
    vueSeamlessScroll,
  },

  props: {
    widget: Object,
    field: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
    designState: {
      type: Boolean,
      default: false,
    },
    devType: {
      type: Boolean,
      default: false,
    },
    subFormRowIndex: {
      /* 子表单组件行索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormColIndex: {
      /* 子表单组件列索引，从0开始计数 */
      type: Number,
      default: -1,
    },
    subFormRowId: {
      /* 子表单组件行Id，唯一id且不可变 */
      type: String,
      default: "",
    },
    headTitle: {
      type: String,
      default: "",
    },
    visibleTitle: {
      type: Boolean,
    },
    //prop传入的表单JSON配置
    parentApi: {
      type: Object,
      default: () => buildParentApi(),
    },
  },

  data() {
    return {
      number: 0,
      scrollShow: false,
      // doctorSchedulingInfo: {},
      doctorSchedule: [
        {
          label: { name: "午别", value: 0 },
          AM: { name: "上午", value: 0 },
          PM: { name: "下午", value: 0 },
        },
        {
          label: { name: "周一", value: 1 },
          AM: { name: "上午", value: "" },
          PM: { name: "下午", value: "" },
        },
        {
          label: { name: "周二", value: 1 },
          AM: { name: "上午", value: "" },
          PM: { name: "下午", value: "" },
        },
        {
          label: { name: "周三", value: 1 },
          AM: { name: "上午", value: "" },
          PM: { name: "下午", value: "" },
        },
        {
          label: { name: "周四", value: 1 },
          AM: { name: "上午", value: "" },
          PM: { name: "下午", value: "" },
        },
        {
          label: { name: "周五", value: 1 },
          AM: { name: "上午", value: "" },
          PM: { name: "下午", value: "" },
        },
        {
          label: { name: "周六", value: 1 },
          AM: { name: "上午", value: "" },
          PM: { name: "下午", value: "" },
        },
        {
          label: { name: "周日", value: 1 },
          AM: { name: "上午", value: "" },
          PM: { name: "下午", value: "" },
        },
      ],
      optionsInfo: Array(),
      widgetKey: uuid(),
      header: require("@a/images/design/header.jpeg"),
      header2: require("@/components/assets/images/design/header.jpeg"),
    };
  },

  computed: {
    getSource() {
      return function () {
        let { advVideoList } = this.optionsInfo;
        let video = advVideoList || [];
        if (video && video.length) {
          return `${video[this.number].url}?t=${this.getOnlyId()}&info=${
            video[this.number].url
          }`;
        }
      };
    },
    classOptionTips() {
      return function () {
        let { scrollNumber, scrollState } = this.optionsInfo;
        let info = scrollState ? scrollNumber : 99999;
        return {
          step: [1, 1.5, 2, 2.5, 3][0], // 数值越大速度滚动越快
          hoverStop: true,
          limitMoveNum: info, // 开始无缝滚动的数据量 this.dataList.length
          direction: 1, // 0向下 1向上 2向左 3向右
        };
      };
      // let { scrollableNumber } = this.optionsInfo;
      // return {
      //   step: [1, 1.5, 2, 2.5, 3][0], // 数值越大速度滚动越快
      //   hoverStop: true,
      //   limitMoveNum: scrollableNumber, // 开始无缝滚动的数据量 this.dataList.length
      //   direction: 1, // 0向下 1向上 2向左 3向右
      // };
    },
    //生成唯一的字符串
    getOnlyId() {
      return function () {
        return uuid();
      };
    },
    // 获取医生头像
    getDoctorPicture() {
      return function (row) {
        let header = require("@/components/assets/images/design/header.png");
        return row?.doctorPic || header;
      };
    },
    pictureResource() {
      let { logoUrl } = this.optionsInfo;
      let header = require("@/components/assets/images/sh/shanghai_logo.png");
      return logoUrl || header;
      // return logoUrl;
    },

    // 模板的行内样式
    getStyle() {
      return function (val) {
        const self = this;
        let info = self.optionsInfo || Object();
        let Obj = Object();
        let dept = info.dept;
        let screen = 3096;
        switch (val) {
          case "area":
            Reflect.set(Obj, "height", pxToVw(info.areaHeight));
            // Reflect.set(Obj, "background", `url(${info.screenBg})`);
            Reflect.set(Obj, "backgroundSize", `100% 100%`);
            return Obj;
          case "radius":
            Reflect.set(Obj, "borderRadius", pxToVw(20));
            return Obj;
          case "adv":
            Reflect.set(Obj, "height", pxToVw(info.advHeight));
            Reflect.set(Obj, "marginBottom", pxToVw(30));
            return Obj;
          case "carousel":
            Reflect.set(Obj, "height", pxToVw(info.advHeight));
            return Obj;

          case "picture":
            Reflect.set(Obj, "height", pxToVw(info.logoHeight));
            return Obj;
          case "avatar":
            Reflect.set(Obj, "height", pxToVw(info.avatarHeight));
            Reflect.set(Obj, "width", pxToVw(info.avatarwidth));
            Reflect.set(Obj, "marginRight", pxToVw(8));
            Reflect.set(Obj, "borderRadius", pxToVw(8));
            return Obj;
          case "title":
            Reflect.set(Obj, "fontSize", pxToVw(info.titleSize));
            return Obj;
          case "ge":
            Reflect.set(Obj, "width", pxToVw(30));
            return Obj;
          case "nameGe":
            Reflect.set(Obj, "width", pxToVw(8));

            return Obj;

          case "secTitle":
            Reflect.set(Obj, "fontSize", pxToVw(info.secTitleSize));
            Reflect.set(Obj, "color", `${info.backgroundColor}`);
            Reflect.set(Obj, "height", pxToVw(info.titleHeight));
            Reflect.set(Obj, "marginBottom", pxToVw(info.titleHeight / 3));

            return Obj;
          case "commonTitle":
            Reflect.set(Obj, "fontSize", pxToVw(info.secTitleSize));
            Reflect.set(Obj, "color", `${info.backgroundColor}`);
            Reflect.set(Obj, "height", pxToVw(info.titleHeight));
            Reflect.set(Obj, "marginBottom", pxToVw(20));
            return Obj;
          case "shu":
            Reflect.set(Obj, "backgroundColor", `${info.backgroundColor}`);
            Reflect.set(Obj, "height", pxToVw(30));
            Reflect.set(Obj, "width", pxToVw(5));

            return Obj;
          case "line":
            Reflect.set(
              Obj,
              "background",
              `linear-gradient(
            90deg,
           ${info.backgroundColor} 0%,
            rgba(141, 54, 34, 0) 90%
          )`
            );
            Reflect.set(Obj, "height", pxToVw(5));
            return Obj;

          case "docItem":
            Reflect.set(
              Obj,
              "flex",
              `1 1 calc(33.333% - ${pxToVw(info.padding + 8)})`
            );
            Reflect.set(
              Obj,
              "maxWidth",
              `calc(33.333% - ${pxToVw(info.padding + 8)})`
            );
            Reflect.set(Obj, "marginBottom", pxToVw(20));
            return Obj;
          case "docName":
            Reflect.set(Obj, "color", info.nameColor);
            Reflect.set(Obj, "marginRight", pxToVw(19));
            Reflect.set(Obj, "marginTop", pxToVw(10));
            Reflect.set(Obj, "fontSize", pxToVw(info.nameFontSize));
            Reflect.set(Obj, "fontWeight", 500);
            return Obj;
          case "line1":
            Reflect.set(Obj, "marginTop", pxToVw(10));
            Reflect.set(Obj, "marginBottom", pxToVw(10));
            return Obj;
          case "level":
            Reflect.set(Obj, "color", info.backgroundColor);
            Reflect.set(Obj, "fontSize", pxToVw(info.levelFontSize));
            Reflect.set(Obj, "fontWeight", 500);
            return Obj;
          case "lineMian":
            Reflect.set(Obj, "background", info.lightBg);
            Reflect.set(Obj, "color", info.nameColor);

            Reflect.set(Obj, "padding", pxToVw(10));
            Reflect.set(Obj, "fontSize", pxToVw(info.introFontSize));
            Reflect.set(Obj, "fontWeight", 400);
            Reflect.set(Obj, "borderRadius", pxToVw(5));
            return Obj;

          case "icon":
            // Reflect.set(Obj, "color", info.backgroundColor);
            Reflect.set(Obj, "height", pxToVw(17));
            Reflect.set(Obj, "marginRight", pxToVw(9));
            // Reflect.set(Obj, "marginRight", pxToVw(14));
            return Obj;
          case "workWrp":
            // Reflect.set(Obj, "gridGap", `0  ${pxToVw(info.padding)}`);
            return Obj;
          case "workGe":
            Reflect.set(Obj, "width", pxToVw(info.padding));
            return Obj;

          case "workItem":
            Reflect.set(Obj, "borderRadius", pxToVw(20));
            Reflect.set(Obj, "padding", pxToVw(info.padding));
            return Obj;
          case "deptWrp":
            Reflect.set(Obj, "background", info.deptBg);
            Reflect.set(Obj, "borderRadius", pxToVw(8));
            Reflect.set(Obj, "padding", pxToVw(info.padding));
            Reflect.set(Obj, "marginBottom", pxToVw(20));
            return Obj;
          case "deptTitle":
            Reflect.set(Obj, "color", "#333333");
            Reflect.set(Obj, "height", pxToVw(42));
            Reflect.set(Obj, "fontSize", pxToVw(30));
            return Obj;
          case "deptImg":
            Reflect.set(Obj, "height", pxToVw(31));
            Reflect.set(Obj, "margin", `0 ${pxToVw(41)}px`);

            return Obj;
          case "nameWrp":
            Reflect.set(Obj, "marginTop", pxToVw(20));

            return Obj;
          case "nameCon":
            Reflect.set(Obj, "color", "#333333");
            Reflect.set(Obj, "background", info.nameBg);
            Reflect.set(Obj, "height", pxToVw(info.nameHeight));
            Reflect.set(Obj, "marginBottom", pxToVw(11));
            Reflect.set(Obj, "fontSize", pxToVw(22));
            return Obj;
          case "introWrp":
            Reflect.set(Obj, "borderRadius", pxToVw(20));
            Reflect.set(Obj, "padding", pxToVw(info.padding));
            return Obj;
          case "introTitle":
            Reflect.set(Obj, "color", info.backgroundColor);
            Reflect.set(Obj, "height", pxToVw(65));
            Reflect.set(Obj, "fontSize", pxToVw(28));
            return Obj;
          case "introCon":
            Reflect.set(Obj, "color", "#333333");
            Reflect.set(Obj, "fontSize", pxToVw(23));
            return Obj;
        }
      };
    },
    // schedulingsInfo() {
    //   let info;
    //   let devType = this.devType;
    //   let doctorListInfo = this.$store.getters["getSchedulingDoctor3096Info"];
    //   if (devType) {
    //     info = doctorListInfo["apiData"] || [];
    //   } else {
    //     info = doctorListInfo["mockData"] || [];
    //   }
    //   console.log("list", info);
    //   return info;
    // },
    // //获取医生信息
    doctorSchedulingInfo() {
      let info;
      let devType = this.devType;
      let doctorListInfo = this.$store.getters["getSchedulingDoctor3096Info"];
      if (devType) {
        info = doctorListInfo["apiData"] || [];
      } else {
        info = doctorListInfo["mockData"] || [];
        console.log(info);
      }
      return info;
    },
  },

  mounted() {
    this.handleOnMounted();
    let devType = this.devType;
    if (!devType) {
      this.$nextTick(() => {
        this.scrollShow = true;
      });
    }
  },

  methods: {
    handleEnded(event) {
      let { advVideoList } = this.optionsInfo;
      let videoInfo = event.target.currentSrc;
      let info = getQueryString("info", videoInfo);
      const findIndex = this.$lodash.findIndex(advVideoList, {
        url: info,
      });
      if (
        !this.$lodash.isUndefined(findIndex) &&
        !this.$lodash.isNull(findIndex)
      ) {
        let next = findIndex + 1;
        if (advVideoList.length > next) {
          this.number = next;
        } else {
          this.number = 0;
        }
      } else {
        this.number = 0;
      }
    },
    getInfo() {
      axios({
        // 一、我要向谁发请求
        // url就能存储发请求的后端
        url: this.optionsInfo.ApiAddress,
        // url: "http://192.168.31.44:7000/clinic/api/qcss/led/scheduleList?terminalId=768",
        // 请求方式(GET, POST, PUT, DELETE等) 请求方法 不要加s 和vue里面的事件源要区分开来, 这两个不是一个东西
        // get 请求方式 可以大写也可以小写 常见的请求方式 get post
        method: "GET",
        // then方法 可以获取响应回来的数据 里面有一个回调函数
        // 里面有一个默认的形参
      }).then((res) => {
        // debugger;
        // res获取到的数据很多 但是我们只需要data里面的数据
        console.log(res.data.data, "wewew");
        this.doctorSchedulingInfo = res.data.data;
        this.$nextTick(() => {
          this.scrollShow = true;
        });
        this.$store.dispatch("setSchedulingDoctor3096Info", res.data.data);
        // return res.data.data;
      });
    },
    // 等待候诊滚动结束
    handleScrollEnd() {
      const self = this;
      if (self.$refs[`scroll_1`]) {
        console.log("等待就诊滚动结束");
        self.$nextTick(() => {
          self.$refs[`scroll_1`][0].reset();
        });
      }
    },
    handleScroll2End() {
      const self = this;
      if (self.$refs[`scroll_2`]) {
        console.log("等待就诊滚动结束");
        self.$nextTick(() => {
          self.$refs[`scroll_2`][0].reset();
        });
      }
    },
    handleScroll3End() {
      const self = this;
      if (self.$refs[`scroll_3`]) {
        console.log("等待就诊滚动结束");
        self.$nextTick(() => {
          self.$refs[`scroll_3`][0].reset();
        });
      }
    },
    backgroundStyle(row) {
      return {
        backgroundImage: `url(${row})`,
        backgroundSize: "cover", // 可以根据需要添加其他样式
        backgroundPosition: "center",
      };
    },
    calculateAndSetScroll() {
      // 获取可视区域高度
      this.$nextTick(() => {
        console.log(
          this.$refs.seamlessWarp,
          this.$refs.seamlessWarp.$el.querySelector(".your-content-class")
            .offsetHeight
        );
        const visibleHeight = this.$refs.seamlessWarp.offsetHeight;
        console.log(visibleHeight, "visibleHeight");

        // 获取数据条目的高度（假设每个条目高度相同，取第一个条目的高度）
        const itemHeight = this.$refs.listItem.offsetHeight;
        console.log(itemHeight, "itemHeight");
        // 计算需要滚动的数据条数（即当总高度超过可视区域高度时开始滚动）
        const limitMoveNum =
          Math.ceil(visibleHeight / itemHeight) +
          (itemHeight * this.listData.length > visibleHeight ? 1 : 0);

        // 设置classOption中的limitMoveNum和autoPlay
        this.classOption.limitMoveNum = limitMoveNum;
        this.classOption.autoPlay =
          itemHeight * this.listData.length > visibleHeight;

        // 如果需要，可以手动触发滚动开始（通常插件会自动处理，这里作为示例）
        // this.$refs.vueSeamlessRef._startMove();
      });
    },
    // 接收父组件传递过来的数据
    async executeMethod(key, data) {
      switch (key) {
        case "publishListInfo":
          this.widgetKey = uuid();
          await this.$store.dispatch("setSchedulingDoctor3096Info", data);
          this.$nextTick(() => {
            this.scrollShow = true;
          });
          break;
        case "getVideoMedias":
          let element = this.$refs.videoInfo;
          if (element) {
            let params = Object();
            let info = this.optionsInfo || Array();
            const rect = element.getBoundingClientRect();
            const positionInfo = {
              width: Math.ceil(rect.width),
              height: Math.ceil(rect.height),
              top: parseInt(rect.top),
              right: parseInt(rect.right),
              bottom: parseInt(rect.bottom),
              left: parseInt(rect.left),
            };
            Reflect.set(params, "positionInfo", positionInfo);
            Reflect.set(params, "video", info["advVideoList"]);
            this.parentApi.executeParentMethod("playVideoMedias", params);
          }
          break;
      }
    },

    handleError(event) {
      event.target.src = "/tpleditor/resource/assets/images/header.png";
    },
  },

  watch: {
    // 获取配置项
    field: {
      handler: function (val) {
        let key = val.options.config;
        this.widgetKey = uuid();
        this.optionsInfo = val.options[key];
      },
      deep: true,
      immediate: true,
    },
  },

  destroyed() {
    this.unregisterFromRefList();
  },
};
</script>
<style lang="css" scoped>
.el-carousel__container {
  height: 100% !important;
}
</style>
<style lang="scss" scoped>
$scale: 7;
.scene-public-scheduling {
  // background-color: transparent;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  background: url("~@/components/assets/images/sh/screen_bg.png");
  color: #333;
  height: 100%;
  line-height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  box-sizing: border-box;
  //transform: scale(3) translate(calc(16.6% * 2), calc(16.6% * 2));
  padding: 1rem 1rem 5.3rem 1rem;
  padding-bottom: 230px;
  .scroll {
    overflow: hidden;
  }
  .ge {
    height: 100%;
    flex-shrink: 0;
  }
  .scheduling-wrap {
    height: calc(100%);
    display: flex;
    // gap: 1rem;
    overflow: hidden;
    margin: 0;
    padding: 0;
    .common-title {
      position: relative;
      display: flex;
      align-items: center;
      background: linear-gradient(
        90deg,
        rgba(237, 223, 220, 1) 0%,
        rgba(141, 54, 34, 0) 90%
      );
      .shu {
        margin-right: 0.5rem;
      }
      .line {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
      }
    }
    .main-left {
      // background: #fff;
      flex: 1;
      display: flex;
      flex-direction: column;
      margin-right: 1rem;
      .main-left-top {
        display: flex;
        align-items: center;
        margin-bottom: 1rem;
      }
      .logo-wrap {
        display: flex;
        flex-shrink: 0;
        margin-right: 10rem;

        img {
          max-width: 100% !important;
          object-fit: contain;
        }
      }
      .next-title {
        display: inline-block;
        color: #ffca26;
      }
      .main-left-content {
        flex: 1;
        background: #fff;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .left-scroll-wrp {
          flex: 1;
          overflow: hidden;
        }
        .sec-title {
          // text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
          background-size: cover;
          background-position: center center;
          flex-shrink: 0;
          background: url("~@/components/assets/images/sh/sh_tbg.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }

        .doc-wrp {
          display: flex;
          flex-wrap: wrap;
          justify-content: start;
          .flex {
            display: flex;
            align-items: flex-start;
          }
          .doc-item {
            display: flex;
            .doc-con {
              display: flex;
              flex: 1;
            }
            .avatar-wrp {
              flex-shrink: 0;
            }
            .doc-info {
              flex: 1;
            }

            .line-1 {
              display: flex;
              align-items: center;
            }
            .line-mian {
              line-height: 1.5em;
              .hang1 {
                margin-bottom: 12px;
              }
            }
          }
        }
      }
    }
    .main-right {
      width: calc(45%);
      display: flex;
      flex-direction: column;
      .adv-wrp {
        background: rgba(237, 223, 220, 0.2);
        overflow: hidden;
        flex-shrink: 0;
      }
      .video-wrap {
        height: 100%;
        width: 100%;
        overflow: hidden;
        position: relative;

        .video-cover-area {
          width: 100%;
          height: 100%;
          min-width: 100%;
          overflow: hidden;
          border-radius: 8px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: rgba(0, 0, 0, 0.8);

          i {
            font-size: 150px;
            color: #ebeef5;
          }
        }

        .video-info-area {
          position: absolute;
          inset: 0;
          overflow: hidden;
          border-radius: 8px;
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
      .work-wrp {
        flex: 1;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        overflow: hidden;
        .work-item {
          flex: 1;
          min-height: 100px;
          background: #fff;
          overflow: hidden;
          font-weight: 500;
          .dept-title {
            display: flex;
            align-items: center;
            justify-content: center;
            img {
              margin: 0 40px;
              display: inline-block;
            }
          }
          .dept-wrp {
            box-sizing: border-box;
          }
          .name-wrp {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            overflow: hidden;
            .name-item {
              width: 20%;
              display: flex;
              flex-shrink: 0;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .name-con {
              display: flex;
              flex: 1;
              justify-content: center;
              align-items: center;
            }
          }
        }
      }
      .intro-wrp {
        flex: 1;
        background: #ffffff;
        .intro-title {
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .intro-content {
          line-height: 1.4em;
        }
      }
    }
  }
}
</style>